<template>
    <div>
        <ul>
            <li v-for="(item, idx) in items" v-bind:key="idx">
                <el-form-item :label="item.content">
                    <el-input v-model="items[idx]['ipt']" @focus="changeScroll" />
                </el-form-item>
            </li>
        </ul>
        <el-button type="success" v-if="items.length > 0" @click="submit">提交</el-button>
        <el-button type="success" v-else @click="goHome">全部正确，返回首页</el-button>

        <div v-if="enlarge" :class="{ come: enlarge }">
            <div id="txt">
                还有错误<br />
                继续努力
            </div>
        </div>
    </div>
</template>

<script>
import tools from "../utils/tools"
export default {
    data() {
        return {
            items: [],
            enlarge: false,
        }
    },
    created() {
        let history = tools.getHistory()
        if (history) {
            for (let once of history) {
                for (let item of once.items) {
                    item.ipt = ""
                    this.items.push(item)
                }
            }
        }
    },
    methods: {
        changeScroll(event) {
            const top = this.offsetTop(event.currentTarget)
            this.$refs.list.scrollTo(0, top - 130)
        },
        goHome() {
            this.$router.push({ name: "home" })
        },
        submit() {
            let result = false
            for (let item of this.items) {
                if (Number.isInteger(item.result)) {
                    if (parseInt(item.ipt) != item.result) {
                        result = true
                        break
                    }
                } else if (item.ipt != item.result) {
                    result = true
                    break
                }
            }
            if (result == false) {
                tools.clearHistory()
                this.items = []
            } else {
                this.enlarge = true
            }
        }
    }
}
</script>

<style>
.come {
    animation-name: myleave;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    position: fixed;
    top: 0;
    left: 0;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;

}

#txt {
    font-size: 6em;
}

@keyframes myleave {
    0% {
        height: 0;
        width: 100%;
    }

    59% {
        height: 90vh;
        width: 100%;
    }

    100% {
        height: 100vh;
        width: 100%;
    }
}
</style>
